<template>
    <div>
        <!-- 主键传值 父给子传 
        v-bind绑定变量 可简写为： 
        -->
    <Title :title="title"></Title>
    <!-- 1.先提供图标容器 ref当前元素模板引用 类似于id-->
     <div style="height: 150px" ref="box"></div>
    </div>
</template>

<script setup>
import Title from'./Title.vue';
//引入moment
import moment from 'moment';
//引入get请求
import {get} from '@/utils/request.js'
import{ref,onMounted} from 'vue';

//引入折线图构造函数
import { Line } from '@antv/g2plot';
const title = ref('实时温度曲线');
//声明模板引用
const box = ref(null);//{value:null}
//声明一个空数组收取后端数据
let temData = ref([]);
//声明折线图表实例函数
const loadLine = ()=>{
    //new Line(图表容器id，{图标配置项})
    const line = new Line(box.value, {
        //图表数据源
  data:temData.value,
  xField: 'time',
  yField: 'temperature',
  //配置x，y颜色
  xAxis:{
label:{
    //旋转
    rotate:-45,
    style:{
        fill:'white'
    }
}
  },
  yAxis:{
label:{
    //旋转
    style:{
        fill:'white'
    }
}
  },
  label: {
    style:{
        fill:"white",
        fontSize:18
    }
  },
  point: {
    size: 5,
    shape: 'diamond',
    style: {
      fill: 'white',
      stroke: '#5B8FF9',
      lineWidth: 2,
    },
  },
  //给折线图设置动画
  animation: {
        appear: {
          animation: 'wave-in',
          duration: 3500,
        },
      },
      //设置曲线平滑
      smooth:true,
  tooltip: { showMarkers: false },
  state: {
    active: {
      style: {
        shadowBlur:4,
        stroke: '#000',
        fill: 'red',
      },
    },
  },
  interactions: [{ type: 'marker-active' }],
});
line.render();
}

//声明获取当天数据函数
const getTemData = async()=>{
let response = await get('/dashboard/pageQueryTodayData',{
    page:1,
    pageSize:60
});
console.log(response,'获取相应');
response.data.list.forEach((item,index,arr)=>{
    //第一条数据更改值
    arr[0].temperature=12;
    item.time = moment(item.insert_time).format('HH:mm');
});
//数据采集可能一致 每隔十条或八条取一条
let temp = [];
for(var i=0;i<response.data.list.length;i++){
if(i%7==0){
    //下标除十等于零
    //将符合条件数据添加至temp
    temp.push(response.data.list[i])
}
}
temData.value = temp;
}
//生命周期 获得dom 节点 标签 ref=box
onMounted(async()=>{
    //调用获取函数
  await getTemData();
loadLine();//加载折线图
})

</script>

<style lang="less">
    
</style>